<template>
  <view class="d-flex jc-center title_wrap">
    <view class="zuojuxing"></view>
    <view class="youjuxing"></view>
    <view class="guang"></view>
    <view class="d-flex jc-center">
      <view class="title">
        <text class="title-text">可视化平台</text>
      </view>
    </view>
    <view class="timers">
      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
      
      <view class="icon-group">
        <view class="icon-btn fullscreen-btn" @click="toggleFullScreen" :title="isFullScreen ? '退出全屏' : '全屏'">
          <view class="fullscreen-icon" :class="{ 'exit-fullscreen': isFullScreen }">
            <view class="corner tl"></view>
            <view class="corner tr"></view>
            <view class="corner bl"></view>
            <view class="corner br"></view>
          </view>
        </view>
        <view class="icon-btn" @click="openSettings" title="设置">
          <image src="/static/img/headers/setting.png" alt="设置"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
import { useSettingStore } from '@/stores/index'

const dateData = reactive({
  dateDay: '',
  dateYear: '',
  dateWeek: '',
  timing: null
})

const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const isFullScreen = ref(false)
const settingStore = useSettingStore()

const timeFn = () => {
  dateData.timing = setInterval(() => {
    dateData.dateDay = dayjs().format('YYYY-MM-DD HH : mm : ss')
    dateData.dateWeek = weekday[dayjs().day()]
  }, 1000)
}

const toggleFullScreen = () => {
  // H5端全屏API
  const element = document.documentElement
  
  if (!isFullScreen.value) {
    // 进入全屏
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen()
    }
    isFullScreen.value = true
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
    isFullScreen.value = false
  }
}

const openSettings = () => {
  settingStore.setSettingShow(true)
}

// 监听全屏状态变化
const handleFullScreenChange = () => {
  isFullScreen.value = !!(
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  )
}

onMounted(() => {
  timeFn()
  
  // 监听全屏状态变化
  document.addEventListener('fullscreenchange', handleFullScreenChange)
  document.addEventListener('mozfullscreenchange', handleFullScreenChange)
  document.addEventListener('webkitfullscreenchange', handleFullScreenChange)
  document.addEventListener('msfullscreenchange', handleFullScreenChange)
})

onUnmounted(() => {
  if (dateData.timing) {
    clearInterval(dateData.timing)
  }
  
  // 移除监听
  document.removeEventListener('fullscreenchange', handleFullScreenChange)
  document.removeEventListener('mozfullscreenchange', handleFullScreenChange)
  document.removeEventListener('webkitfullscreenchange', handleFullScreenChange)
  document.removeEventListener('msfullscreenchange', handleFullScreenChange)
})
</script>

<style scoped lang="scss">
.title_wrap {
  height: 60px;
  background-image: url('/static/img/top.png');
  background-size: cover;
  background-position: center center;
  position: relative;
  margin-bottom: 4px;

  .guang {
    position: absolute;
    bottom: -26px;
    background-image: url('/static/img/guang.png');
    background-position: 80px center;
    width: 100%;
    height: 56px;
  }

  .zuojuxing,
  .youjuxing {
    position: absolute;
    top: -2px;
    width: 140px;
    height: 6px;
    background-image: url('/static/img/headers/juxing1.png');
    background-size: contain;
  }

  .zuojuxing {
    left: 11%;
  }

  .youjuxing {
    right: 11%;
    transform: rotate(180deg);
  }

  .timers {
    position: absolute;
    right: 0;
    top: 30px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    
    .icon-group {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: 12px;
      
      .icon-btn {
        width: 20px;
        height: 20px;
        cursor: pointer;
        transition: transform 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:hover {
          transform: scale(1.1);
        }
        
        image {
          width: 100%;
          height: 100%;
        }
        
        &.fullscreen-btn {
          width: 20px;
          height: 20px;
          
          .fullscreen-icon {
            width: 16px;
            height: 16px;
            position: relative;
            
            .corner {
              position: absolute;
              width: 5px;
              height: 5px;
              border: 2px solid #fff;
              
              &.tl {
                top: 0;
                left: 0;
                border-right: none;
                border-bottom: none;
              }
              
              &.tr {
                top: 0;
                right: 0;
                border-left: none;
                border-bottom: none;
              }
              
              &.bl {
                bottom: 0;
                left: 0;
                border-right: none;
                border-top: none;
              }
              
              &.br {
                bottom: 0;
                right: 0;
                border-left: none;
                border-top: none;
              }
            }
            
            &.exit-fullscreen {
              .corner {
                border-color: #00eaff;
                
                &.tl {
                  top: 2px;
                  left: 2px;
                  border-left: none;
                  border-top: none;
                  border-right: 2px solid #00eaff;
                  border-bottom: 2px solid #00eaff;
                }
                
                &.tr {
                  top: 2px;
                  right: 2px;
                  border-right: none;
                  border-top: none;
                  border-left: 2px solid #00eaff;
                  border-bottom: 2px solid #00eaff;
                }
                
                &.bl {
                  bottom: 2px;
                  left: 2px;
                  border-left: none;
                  border-bottom: none;
                  border-right: 2px solid #00eaff;
                  border-top: 2px solid #00eaff;
                }
                
                &.br {
                  bottom: 2px;
                  right: 2px;
                  border-right: none;
                  border-bottom: none;
                  border-left: 2px solid #00eaff;
                  border-top: 2px solid #00eaff;
                }
              }
            }
          }
        }
      }
    }
  }
}

.title {
  position: relative;
  text-align: center;
  background-size: cover;
  color: transparent;
  height: 60px;
  line-height: 46px;

  .title-text {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}
</style>

